<template>
	<div class="d1">
		<!-- 面包屑导航提示 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>救援任务</el-breadcrumb-item>
			<el-breadcrumb-item>救援任务</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 中间区域内容 -->
		<el-card>
			<!-- 搜索框 -->
			<div style="width: 100%; display: inline-block; margin-right: 20px; margin-bottom: 20px;">
				车牌号：<el-input placeholder="车牌号" v-model="queryInfo.carid" class="input-with-select">
				</el-input>
				救援类型：<el-input placeholder="救援类型" v-model="queryInfo.type" class="input-with-select">
				</el-input>
				<div class="block" style="float:right;margin-right:200px">
				    <span class="demonstration">救援时间 :  </span>
				    <el-date-picker
					format = "yyyy-MM-dd HH:mm"
					value-format="yyyy-MM-dd HH:mm"
				      v-model="queryInfo.time"
				      type="datetimerange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				    </el-date-picker>
				  </div>
				    
			</div>
			<el-button type="primary" @click="selectRescues">筛选</el-button>
			<el-button type="primary">导出</el-button>
			<el-button type="primary" class="b1" @click=" adddialogFormVisible = true ">添加救援信息</el-button>
			<!-- 添加对话框 -->
			<el-dialog title="添加救援信息" :visible.sync="adddialogFormVisible" label-width="80px" @close="addrescueReset" >
			  <el-form :model="addrescue" ref="addrescueref" :rules="addrescuerules" >
			    <el-form-item label="救助人:"   prop="rescueby" >
			      <el-input v-model="addrescue.rescueby" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="联系方式:" >
				  <el-input v-model="addrescue.phone" autocomplete="off"></el-input>
				</el-form-item>
			    <el-form-item label="救助类型">
			        <el-select v-model="addrescue.type" placeholder="请选择救助类型">
			          <el-option label="搭电" value="搭电"></el-option>
			          <el-option label="换胎" value="换胎"></el-option>
					  <el-option label="拖车" value="拖车"></el-option>
			        </el-select>
			      </el-form-item>
				  <el-form-item v-if="addrescue.type!='拖车'"  label="车牌号:">
				    <el-input v-model="addrescue.carid" autocomplete="off"></el-input>
				  </el-form-item>
				
			<el-form-item label="具体地址">
				<el-input  v-show="false" v-model="addrescue.lng"    ></el-input>
			   	<el-input  v-show="false" v-model="addrescue.lat"   ></el-input>
			    <el-input v-model="addrescue.address" style="width: 400px;"   ></el-input>
			   	<el-button @click="show">点击定位</el-button>
			   	<baiduMap
			         @cancel="cancelMap" 
			         @map-confirm="confirmMap"
			         :visible="showMapComponent"
			       	></baiduMap>
			       	
			  </el-form-item>
			  
			  <el-form-item v-if="addrescue.type== '拖车' "  label="车辆类型:">
			    <el-select v-model="addrescue.cartype" placeholder="请选择车辆类型">
			      <el-option label="轿车" value="轿车"></el-option>
			      <el-option label="suv" value="suv"></el-option>
			      <el-option label="半挂" value="半挂"></el-option>
			    </el-select>
			  </el-form-item>
			  
			  <el-form-item v-if="addrescue.type== '拖车' " label="终点位置">
			 
			    <el-input v-model="addrescue.endaddress" style="width: 400px;"   ></el-input>
			     	<el-button @click="endshow">点击定位</el-button>
			     	<baiduMap
			           @cancel="endcancelMap" 
			           @map-confirm="endconfirmMap"
			           :visible="endshowMapComponent"
			         	></baiduMap>
			         	
			    </el-form-item>
			  
	
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="addrescueReset">取 消</el-button>
			    <el-button type="primary" @click="addrescueform">确 定</el-button>
			  </div>
			</el-dialog>
			<!-- 表格数据 -->
			<el-table :data="rescueList" border style="width: 100%">
				<el-table-column prop="rescueby" label="救助人">
				</el-table-column>
				<el-table-column prop="type" label="救援类型">
				</el-table-column>
				<el-table-column prop="carid" label="车牌">
				</el-table-column>
				<el-table-column prop="address" label="救援位置">
				</el-table-column>
				<el-table-column prop="endaddress" label="终点位置">
				</el-table-column>
				<el-table-column prop="applytime" label="申请时间">
				</el-table-column>
				
				<!-- <el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="详情" placement="top">
							<el-button type="primary" icon="el-icon-more" size="mini" @click="toshow(scope.row.id)">
							</el-button>
						</el-tooltip>
						
						<el-tooltip v-if="scope.row.status==1" class="item" effect="dark" 
						content="下架" placement="top">
							<el-button type="danger" icon="el-icon-error" size="mini" 
							@click="updateNoticeStatus(scope.row.status,scope.row.id)">
							</el-button>
						</el-tooltip>
						<el-tooltip v-if="scope.row.status==0" class="item" effect="dark" 
						content="上架" placement="top">
							<el-button type="success" icon="el-icon-success" size="mini" 
							@click="updateNoticeStatus(scope.row.status,scope.row.id)">
							</el-button>
						</el-tooltip>
						<el-tooltip v-if="scope.row.status==0" class="item" effect="dark" content="编辑" placement="top">
							<el-button type="danger" icon="el-icon-edit" size="mini" @click="toedit(scope.row.id)">
							</el-button>
						</el-tooltip>
						
						
					</template>
				</el-table-column> -->
				
				<!-- 详情展示 -->
				<el-dialog title="发布信息" :visible.sync="showdialogFormVisible"
				 label-width="80px" >
				  <el-descriptions class="margin-top" title="详情" :column="1" :size=" 'medium' " border>
				     <template slot="extra">
				       <el-button type="primary" @click="shownoticeReset" size="small">返回</el-button>
				     </template>
				     <el-descriptions-item>
				       <template slot="label">
				         <i class="el-icon-user"></i>
				         标题
				       </template>
				       {{shownotice.title}}
				     </el-descriptions-item>
				     <el-descriptions-item>
				       <template slot="label">
				         <i class="el-icon-mobile-phone"></i>
				         发布人
				       </template>
				       {{shownotice.author}}
				     </el-descriptions-item>
				     <el-descriptions-item>
				       <template slot="label">
				         <i class="el-icon-location-outline"></i>
				         发布时间
				       </template>
				       {{shownotice.createtime}}
				     </el-descriptions-item>
				     <el-descriptions-item>
				       <template slot="label">
				         <i class="el-icon-tickets"></i>
				         内容
				       </template>
				       {{shownotice.content}}
				     </el-descriptions-item>
				     <el-descriptions-item>
				       <template slot="label">
				         <i class="el-icon-office-building"></i>
				         图片
				       </template>
				       <div class="demo-image">
				         <div class="block" style="width: 110px; height: 110px ;display: inline-block;"
						   v-for="url in urls"  >
				          
				           <el-image
				             style="width: 100px; height: 100px ;display: inline-block;"
				             :src="url"
				             :fit="'contain'"></el-image>
				         </div>
				       </div>
				     </el-descriptions-item>
				   </el-descriptions>
										
				</el-dialog>
				
				<!-- 编辑对话框 -->
				<el-dialog title="发布信息" :visible.sync="editdialogFormVisible"
				 label-width="80px" @close="editnoticeReset" >
				  <el-form :model="editnotice" ref="editnoticeref" :rules="addrescuerules" >
				    <el-form-item label="标题:" prop="title">
				      <el-input v-model="editnotice.title" autocomplete="off"></el-input>
				    </el-form-item>
				    <el-form-item label="内容:" prop="content" >
							<el-input style="width: 80%;"
							  type="textarea"
							  :autosize="{ minRows: 2, maxRows: 4}"
							  placeholder="请输入内容"
							  v-model="editnotice.content">
							</el-input>
				    </el-form-item>
					<el-form-item label="图片:"  prop="img">
						<el-upload
						  action="http://127.0.0.1:8888/upload"
						  list-type="picture-card"
						  :on-preview="edithandlePictureCardPreview"
						  :on-success="edithandleAvatarSuccess"
						  :on-remove="edithandleRemove"
						  :file-list="editnoticelist">
						  <i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="editdialogVisible">
						  <img width="100%" :src="editdialogImageUrl" alt="">
						</el-dialog>	
					</el-input>
					</el-form-item>
					
				  </el-form>
				  <div slot="footer" class="dialog-footer">
				    <el-button @click="editnoticeReset">取 消</el-button>
				    <el-button type="primary" @click="editnoticeform">确 定</el-button>
				  </div>
				</el-dialog>
			</el-table>
			<!-- 分页 -->
			<!-- 
				current-page：当前页
				page-sizes：可以选择的每页条数
				layout：要展示的分页的组件
				total：总条数
				@size-change：每页展示的条数发生改变，调用的函数
				@current-change：当前页发生改变时调用的函数
			-->
			<div class="block">
				<el-pagination 
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" 
					:page-sizes="[3,4,5]"
					 :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="queryInfo.total">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	// import mapSelect from '@/components/mapSelect'
	import baiduMap from '@/components/baiduMap'
	export default {
		components: {
		            baiduMap
		},
		data() {
			return {
				//地图对话框 
				 showMapComponent: false,
				endshowMapComponent:false,
				// 搜索的对象
				queryInfo: {
					carid: '',
					type: '',
					pageNum: 1,
					pageSize: 3,
					total: 0,
					starttime:'',
					endtime:'',
					time:''
				},
				
				addrescue:{
					rescueby:'',
					phone:'',
					type:'',
					address:'',
					carid: '',
					cartype:'',
					endaddress:'',
					img:'',
					lat:'',
					lng:''
				},
				addrescuerules:{
					rescueby: [
					            { required: true, message: '请输入标题名', trigger: 'blur' },
					            
					          ],
					phone: [
					            { required: true, message: '请输入手机号', trigger: 'blur' },
					             { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					          ],
					type: [
					            { required: true, message: '请选择', trigger: 'blur' },
					            
					          ],
				},
				editnotice:{
					id:'',
					title: '',
					content:'',
					author: '',
					img:'',
				},
				shownotice:{
					
					title: '',
					content:'',
					author: '',
					createtime:'',
					img:'',
					
				},
				rescueList:[],
				value1:'',
				adddialogFormVisible:false,
				updialogVisible:false,
				
				updialogImageUrl:'',
				editnoticelist:[],
				editdialogImageUrl : '',
				editdialogVisible : false,
				editdialogFormVisible:false,
				showdialogFormVisible:false,
				urls:[],
			}
		},
		mounted() {
			this.selectRescues();
		},
		methods:{
			
			show(){
			this.showMapComponent = !this.showMapComponent
			},
			cancelMap () {
			this.showMapComponent = !this.showMapComponent
			},
			confirmMap (e) {
			
			//const obj = { 经度: e.lng, 纬度: e.lat ,地址: e.address};
			
			//2.4 编写地图定位组件
			this.addrescue.lng = e.lng;
			this.addrescue.lat = e.lat;
			this.addrescue.address = e.address;
			
			this.showMapComponent = !this.showMapComponent
			},
			endshow(){
			this.endshowMapComponent = !this.endshowMapComponent
			},
			endcancelMap () {
			this.endshowMapComponent = !this.endshowMapComponent
			},
			endconfirmMap (e) {
			
			//const obj = { 经度: e.lng, 纬度: e.lat ,地址: e.address};
			
			//2.4 编写地图定位组件
			// this.addrescue.lng = e.lng;
			// this.addrescue.lat = e.lat;
			this.addrescue.endaddress = e.address;
			
			this.endshowMapComponent = !this.endshowMapComponent
			},
			
			selectRescues(){
				this.rescueList=[];
				if(this.queryInfo.time.length ==  0){
					this.queryInfo.time=['',''];
				}
				console.log(this.queryInfo.time)
				let param = new URLSearchParams();
				param.append('carid',this.queryInfo.carid);
				param.append('type',this.queryInfo.type);
				param.append('starttime',this.queryInfo.time[0]);
				param.append('endtime',this.queryInfo.time[1]);
				param.append('pageNum',this.queryInfo.pageNum);
				param.append('pageSize',this.queryInfo.pageSize);
				this.$http.post('selectRescues',param).then(res =>{
					if(res.data.code == 200){
						this.rescueList = res.data.data.list;
						this.queryInfo.total = res.data.data.total;
						this.queryInfo.pageNum = res.data.data.pageNum;
						this.queryInfo.pageSize = res.data.data.pageSize;
					}else{
						this.$message.error(res.data.msg)
						this.noticeList='';
					}
				})
			},
			handleSizeChange(val){
				this.queryInfo.pageNum=1;
				this.queryInfo.pageSize = val;
				this.selectRescues();
				
			},
			handleCurrentChange(val){
				this.queryInfo.pageNum = val;
				//this.queryInfo.pageSize= 3;
				this.selectRescues();
			},
			
			addrescueReset(){
				this.$refs['addrescueref'].resetFields();
				
				
				
				this.adddialogFormVisible = false;
			},
			addrescueform(){
				 this.$refs['addrescueref'].validate((valid) => {
				          if (valid) {
				            console.log(this.addrescue.img)
							let param = new URLSearchParams();
							param.append('rescueby',this.addrescue.rescueby+this.addrescue.phone);
							param.append('type',this.addrescue.type);						
							param.append('address',this.addrescue.address);
							param.append('carid',this.addrescue.carid);
							param.append('cartype',this.addrescue.cartype);
							param.append('endaddress',this.addrescue.endaddress);
							param.append('reserve1',this.addrescue.lng);
							param.append('reserve2',this.addrescue.lat);
							this.$http.post("addRescue",param).then(res =>{
								if(res.data.code == 200){
									this.$refs['addrescueref'].resetFields();
									this.addrescuelist= [];
									this.adddialogFormVisible = false;
									this.queryInfo.pageNum=1;
									this.queryInfo.pageSize=3;
									this.updialogImageUrl = '';
									this.selectRescues();
								}else{
									this.$refs['addrescueref'].resetFields();
									this.adddialogFormVisible = false;
								}
							})
				          } else {
				            console.log('error submit!!');
				            return false;
				          }
				        });
			},
			editnoticeReset(){
				//this.$refs['editnoticeref'].resetFields();
				this.editnoticelist= [];
				this.editdialogImageUrl = '';
				this.editdialogFormVisible = false;
			},
			edithandlePictureCardPreview(file){
				this.editdialogImageUrl = file.url;
				this.editdialogVisible = true;
			},
			edithandleAvatarSuccess(res, file){
				if(res.code==200){
					if (this.editnotice.img== '') {
						this.editnotice.img = res.msg;
					}else{
						this.editnotice.img=this.editnotice.img +','+ res.msg;
					}
					
				}
			},
			edithandleRemove(file, fileList){
				console.log(file)
				console.log(fileList)
				this.addrescuelist = [];
			},
			toedit(id){
				this.editnoticelist = [];
				this.editdialogFormVisible = true;
				this.$http.get("selectRescuesById/"+id).then(res =>{
					if(res.data.code==200){
						this.editnotice = res.data.data;
						var s = this.editnotice.img.split(',')
						//console.log(s)
						for(var i = 0; i < s.length; i++) {
							//console.log(s[i]);
							var in1 = {
								name:s[i],
								url:"http://127.0.0.1:8888/showImg?filename="+s[i]
								};
							this.editnoticelist.push(in1);						
						}
					}
				})
				
			},
			editnoticeform(){
				this.$refs['editnoticeref'].validate((valid) => {
				         if (valid) {
				           console.log(this.editnotice.img)
											let param = new URLSearchParams();
											param.append('id',this.editnotice.id);
											param.append('title',this.editnotice.title);
											param.append('author',this.editnotice.author);
											param.append('content',this.editnotice.content);
											param.append('img',this.editnotice.img);
											this.$http.post("updateNotice",param).then(res =>{
												if(res.data.code == 200){
													this.$refs['editnoticeref'].resetFields();
													this.editnoticelist= [];
													this.editdialogFormVisible = false;
													this.queryInfo.pageNum=1;
													this.queryInfo.pageSize=3;
													this.editdialogImageUrl = '';
													this.selectRescues();
												}
											}) 
				         } else {
				           console.log('error submit!!');
				           return false;
				         }
				       });
			},
			shownoticeReset(){
				this.urls=[];
				this.showdialogFormVisible =false;
				
			},
			toshow(id){
				this.urls=[];
				this.showdialogFormVisible =true;
				this.$http.get("selectRescuesById/"+id).then(res =>{
					if(res.data.code==200){
						this.shownotice = res.data.data;
						var s = this.shownotice.img.split(',')
						//console.log(s)
						for(var i = 0; i < s.length; i++) {
							console.log(s[i]);
							let url="http://127.0.0.1:8888/showImg?filename="+s[i];
								console.log(url)
							this.urls.push(url);						
						}
					}
				})
			},
			updateNoticeStatus(status,id){
				let mess=(status==0?"上架":"下架") 
				 this.$confirm('此操作将进行'+mess+', 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          let param = new URLSearchParams();
				          param.append("id",id);
				          param.append("status",status);
				          this.$http.post("updateNoticeStatus",param).then(res =>{
				          	if(res.data.code==200){
				          		this.$message.success(res.data.msg);
								this.queryInfo.pageNum=1;
								this.queryInfo.pageSize=3;
				          		this.selectRescues();
				          	}else{
								this.$message.error(res.data.msg);
								this.queryInfo.pageNum=1;
								this.queryInfo.pageSize=3;
								this.selectRescues();
							}
				          })
						  
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消'+mess
				          });          
				        });
				
				
				
			},
		}
	}
</script>

<style scoped>
	.el-card {
		margin-top: 15px;
		text-align: left;
		padding: 20px;
	}
	
	.el-input {
		display: inline-block;
		width: 240px;
		margin-right: 50px;
	}
	
	.el-table {
		margin-top: 20px;
	}
	.b1{
		float: right;
	}
</style>